<template>
  <view>
    <!-- pages/baoxiang/baoxiang.wxml -->
    <!-- 轮播图 -->
    <scroll-view class="scroll-view" :scroll-y="true">
      <view class="swiper-container">
        <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" :circular="true"
                class="swiper">
          <swiper-item v-for="(item, index) in houseinfodata.banner_list" :key="index">
            <image :src="item" class="slide-image" mode="aspectFill"/>
          </swiper-item>
        </swiper>

        <view class="baoxiang_name">
          <view class="bx_lbt_name">
            {{ houseinfodata.name }}
          </view>
        </view>

        <view class="zhuangtai">
          <view class="zt_lbt_name" v-if="houseinfodata.room_status_data.status == 1"
                style=" background-color: rgb(39, 167, 124);">
            {{ houseinfodata.room_status_data.title }}
          </view>
          <view class="zt_lbt_name" v-if="houseinfodata.room_status_data.status == 2"
                style="background-color: rgb(197, 52, 52)">
            {{ houseinfodata.room_status_data.title }}
          </view>
          <view class="zt_lbt_name" v-if="houseinfodata.room_status_data.status == 3"
                style=" background-color: rgb(255,86,24);">
            {{ houseinfodata.room_status_data.title }}
          </view>
        </view>
      </view>

      <view class="gg">
        <image src="/static/pages/img/喇叭.png" class="gg_tp"></image>
        <view>{{
            '营业时间：' + houseinfodata.business_hours.start_time + ' - ' + houseinfodata.business_hours.end_time + '，' + math.multiply(houseinfodata.booktime, 60) + '分钟起订'
          }}
        </view>
      </view>

      <view class="xzq">
        <view v-for="(item,index) in dayslist" :key="index" @tap="curdaychange(item.day)"
              :class="curday == item.day ? 'xzq_6' : 'xzq_5'">
          <view>{{ item.name }}</view>
          <view>{{ formast(item.day) }}</view>
        </view>


        <picker mode="date" :start="startdate" :end="enddate" :value="curday" fields="day" @change="dateChange"
                class="xzq_rl">
          <!-- 要预约更后面弹窗选择日期 -->
          <image class="xzq_rq" src="/static/pages/img/日历.png"></image>
          <image class="xzq_sjx" src="/static/pages/img/三角形.png"></image>
        </picker>
      </view>

      <view class="ge1"></view>

      <view class="xzq_yd">
        <!-- 大包小包 -->
        <scroll-view class="scroll-view_H" scroll-x="true">
          <view class="scroll-view-item_H" v-for="(item, index) in houseinfodata.package_price" :key="index"
                :data-time="item.title">
            <view style="position: relative">
              <view class="xzq_yd_k xzq_active" v-if="curdurationindex==index">
                {{ item.title }}
              </view>
              <view class="xzq_yd_k" @tap="selComboChange(index)" v-else>
                {{ item.title }}
              </view>
              <view v-if="item.id==cantimarr.is_recommend"
                    style="position:absolute;top:0;right:4px;color: red;text-align: center;border-radius: 10px;border-style: solid;border-width: 1px;border-color: red;font-size: 10px;width: 16px;height: 16px;">
                省
              </view>
            </view>
          </view>
        </scroll-view>
      </view>

      <view class="sj_text">
        <view class="sj_box">
          <view class="sj_title">开始时间</view>
          <picker mode="time" :start="starttime" end="23:59" :value="orderStartTime"
                  @change="orderStartTimeChange">
            <view class="sj_ks">
              {{ orderStartTime }}
              <image class="sj_ksb" src="/static/pages/img/笔.png"></image>
            </view>
          </picker>
        </view>
        <view class="sj_box">
          <view class="sj_title">消费时长</view>
          <view class="sj_sc">{{ getdurtime() }}</view>
        </view>
        <view class="sj_box" style="width: unset">
          <view class="sj_title">结束时间</view>
          <view class="sj_js" v-if="houseinfodata.package_price[curdurationindex]['id']!=0">{{ orderEndTime }}</view>
          <view class="sj_ks" v-else @tap="openseltime">
            {{ orderEndTime }}
            <image class="sj_ksb" src="/static/pages/img/笔.png"></image>
            <u-datetime-picker
                @close="closeseltime"
                @cancel="closeseltime"
                :show="showselendtime"
                :maxDate="endtimemaxDate"
                :minDate="endtimeminDate"
                v-model="endtimestimp"
                mode="datetime"
                @confirm="orderEndTimeChange"
            ></u-datetime-picker>
          </view>
        </view>
      </view>

      <view class="bx_h3">
        <view class="bxh_left">
          <view class="kexuan"></view>
          <text>可选</text>
          <view class="bukexuan"></view>
          <text>不可选</text>
        </view>
        <text style="color: #2facff" @tap="seetime">查看已占用时间</text>
      </view>

      <view class="if_fk">
        <view v-for="(item, index) in houseinfodata.servicing_today_hour" :key="index">
          <view class="k_fk" v-if="item.status == '1'"></view>

          <view class="k_fk k_selected" v-if="item.status == '0'"></view>

          <view class="k_fk k_select" v-if="item.status == '3'"></view>

          <view>{{ parseInt(item.time.slice(0, 2)) }}</view>
        </view>
      </view>

      <view class="cr">次日</view>

      <view class="if_fk">
        <view v-for="(item, index) in houseinfodata.servicing_tomorrow_hour" :key="index">
          <view class="k_fk" v-if="item.status == '1'"></view>

          <view class="k_fk k_selected" v-if="item.status == '0'"></view>

          <view class="k_fk k_select" v-if="item.status == '3'"></view>

          <view>{{ parseInt(item.time.slice(0, 2)) }}</view>
        </view>
      </view>

      <view class="ge2"></view>

      <!--      <view class="ztxq">-->
      <!--        <view class="ztxq_h1">桌台详情</view>-->
      <!--        <text class="ztxq_text">{{ ztxq }}</text>-->
      <!--      </view>-->

      <view class="di">
        <view class="di_text">
          <text class="di_text_1">￥{{ expense }}</text>
          <text style="font-size: 10px">已选{{ getdurtime() }}</text>
        </view>

        <view class="di_ljyd" @click="gopay()">
          <view>立即预定</view>
        </view>
      </view>
    </scroll-view>

    <!-- 查看占用时间 -->
    <view class="modal-mask" v-if="seetimedata.visible">
      <view class="modal-container">
        <image class="_x" @tap="closeseetime" src="/static/pages/img/x .png"></image>
        <view class="gr_tc_ding gr_tc_dy" style="padding: 20px">
          <view v-for="(item,index) in houseinfodata.lock_time" :key="index" style="margin-bottom: 10px">
            <view style="font-size: 14px">
              <view>开始时间：{{ item.start_time }}</view>
              <view>结束时间：{{ item.end_time }}</view>
            </view>
          </view>
        </view>

        <view class="gr_tc_xyb" @tap="closeseetime">
          <view>知道了</view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
// pages/baoxiang/baoxiang.js
import {houseInfo, submitpreview, timePreview} from "@/common/api";
import {math} from "@/common/mathutils";
import moment from "moment";

var app = getApp();
export default {
  computed: {
    math() {
      return math
    },
  },
  data() {
    return {
      showselendtime: false,
      endtimestimp: '',
      endtimestimp1: '',
      endtimemaxDate: '',
      endtimeminDate: '',
      seetimedata: {
        visible: false
      },
      expense: '0.00',
      initdata: {},
      starttime: '00:00',
      orderStartTime: '00:00',
      orderEndTime: '',
      curdurationindex: 0,
      houseinfodata: {
        package_price: [],
        servicing_today_hour: [
          {
            status: 1,
            time: '00:00',
            price: 0
          }
        ],
        servicing_tomorrow_hour: [
          {
            status: 1,
            time: '00:00',
            price: 0
          }
        ],
      },
      house_id: '',
      startdate: '',
      enddate: '',
      curday: '',
      dayslist: [],
      curduration: 0,
      cantimarr: {}
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.house_id = options.id

    // this.orderendtime = options.orderendtime
    // if (options.pagetypetype) {
    //   this.pagetypetype = options.pagetypetype
    // }
    // console.log("this.pagetypetype = options.pagetypetype", this.pagetypetype)

  },
  onShow() {
    this.inittag = 1
    this.startdate = moment().locale('zh-cn').format("YYYY-MM-DD")
    this.enddate = moment().add(7, 'day').locale('zh-cn').format("YYYY-MM-DD")
    this.getdata(() => {
      this.curdayref()
      this.curduration = math.multiply(this.houseinfodata.package_price[this.curdurationindex]['num'], 60)
      this.gettimePreview()
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  },
  watch: {
    //当前日期变化监听
    // curday(newval) {
    //   this.getdata(() => {
    //
    //     this.curdurationref()
    //     this.curtimeref()
    //
    //     // this.curexpenseref()
    //     this.cursignref()
    //     this.gettimePreview()
    //   })
    // },
    // //当前选购时长变化监听
    // curduration(newval) {
    //   console.log('当前选购套餐变化')
    //
    //   this.curtimeref()
    //   // this.curexpenseref()
    //   this.cursignref()
    //   this.gettimePreview()
    // },
    // //当前开始时间变化监听
    // orderStartTime(newval) {
    //
    //   console.log('当前开始时间变化监听')
    //   this.curtimeref()
    //   // this.curexpenseref()
    //   this.cursignref()
    //   this.gettimePreview()
    // },
    cantimarr() {
      this.curtimeref()
    }
  },
  methods: {
    openseltime() {
      this.showselendtime = true;
    },
    closeseltime() {
      this.endtimestimp = this.endtimestimp1
      this.showselendtime = false;
    },
    //获取预定时长文本
    getdurtime() {
      const duration = moment.duration(this.curduration, 'minutes');
      let time = ""
      console.log('getdurtime', this.curduration, duration.hours())
      if (duration.days() > 0) {
        time += duration.days() + "天"
      }
      if (duration.hours() > 0) {
        time += duration.hours() + "小时"
      }
      if (duration.minutes() > 0) {
        time += duration.minutes() + "分"
      }
      return time;
    },


    //当前日期变化
    curdaychange(date) {
      if (this.curday != date) {

        this.curday = date
        if (moment(this.curday).isSame(moment().subtract(1, 'm'), "day")) {
          this.starttime = moment().format("HH:mm")
          this.orderStartTime = moment().format("HH:mm")
        } else {
          this.starttime = '00:00'
          this.orderStartTime = '00:00'
        }
        console.log("修改------------------", this.starttime, this.orderStartTime)
        this.getdata(() => {
          this.curdayref(date)
          this.gettimePreview()
        })
      }
    },
    //日期变化
    dateChange(e) {
      this.curday = e.detail.value
      if (moment(this.curday).isSame(moment().subtract(1, 'm'), "day")) {
        this.starttime = moment().format("HH:mm")
        this.orderStartTime = moment().format("HH:mm")
      } else {
        this.starttime = '00:00'
        this.orderStartTime = '00:00'
      }
      this.getdata(() => {
        this.curdayref(e.detail.value)
        this.gettimePreview()
      })
    },
    //选购套餐变化
    selComboChange(index) {
      if (this.curdurationindex != index) {
        this.curdurationindex = index
        this.curduration = math.multiply(this.houseinfodata.package_price[index]['num'], 60)
        this.gettimePreview()
      }
    },
    //开始时间改变
    orderStartTimeChange(e) {
      this.orderStartTime = e.detail.value;
      this.gettimePreview()
    },
    //结束时间变化
    orderEndTimeChange(value) {
      this.showselendtime = false;
      this.endtimestimp1 = value.value;
      this.curduration = moment(value.value).diff(moment(this.curday + " " + this.orderStartTime + ":00"), 'minute')
      this.gettimePreview()
      console.log('value', value,this.curduration)
    },
    //当前日期更新
    curdayref(date) {
      let has = false
      for (let i = 0; i < this.dayslist.length; i++) {
        let item = this.dayslist[i]
        if (moment(date).isSame(moment(item['day']), "day")) {
          has = true
          this.curday = item['day']
          break;
        }
      }
      if (!has) {
        let curdate = moment(date).diff(moment(this.curday), 'days')
        if (curdate > 0) {
          this.dayslist = []
          for (let i = 4; 0 <= i; i--) {
            if (i == 0) {
              this.dayslist.push({
                name: moment(date).isSame(moment(), "day") ? '今日' : moment(date).locale('zh-cn').subtract(i, 'days').format("dddd"),
                day: moment(date).locale('zh-cn').subtract(i, 'days').format("YYYY-MM-DD")
              })
            } else {
              this.dayslist.push({
                name: moment(date).locale('zh-cn').subtract(i, 'days').format("dddd"),
                day: moment(date).locale('zh-cn').subtract(i, 'days').format("YYYY-MM-DD")
              })
            }
          }
          this.curday = this.dayslist[4]['day']
        } else {
          this.dayslist = []
          for (let i = 0; i < 5; i++) {
            if (i == 0) {
              this.dayslist.push({
                name: moment(date).isSame(moment(), "day") ? '今日' : moment(date).locale('zh-cn').add(i, 'days').format("dddd"),
                day: moment(date).locale('zh-cn').add(i, 'days').format("YYYY-MM-DD")
              })
            } else {
              this.dayslist.push({
                name: moment(date).locale('zh-cn').add(i, 'days').format("dddd"),
                day: moment(date).locale('zh-cn').add(i, 'days').format("YYYY-MM-DD")
              })
            }

          }
          this.curday = this.dayslist[0]['day']
        }
      }
      console.log('当前日期更新', date,this.curday)
    },
    // //当前选购套餐更新
    // curdurationref() {
    //   console.log('当前选购套餐更新', this.curday)
    //   this.curduration = math.multiply(this.houseinfodata.package_price[this.curdurationindex]['num'], 60)
    // },

    //当前选购时间更新
    curtimeref() {
      console.log('当前选购时间更新')
      let overtime = moment(this.curday + " " + this.orderStartTime + ":00").add(this.curduration, 'minute');
      this.endtimeminDate = moment(this.curday + " " + this.orderStartTime + ":00").add(1, 'hour').valueOf()
      let overday = moment(this.curday + " " + this.orderStartTime + ":00").add(1, 'day').format("YYYY-MM-DD")
      this.endtimemaxDate = moment(overday + " 23:59:59").valueOf()
      let overtimeformat = moment(this.curday + " " + this.orderStartTime + ":00").add(this.curduration, 'minute').format("HH:mm");
      if (moment(this.curday).isSame(overtime, "day")) {
        this.orderEndTime = overtimeformat;
      } else {
        this.orderEndTime = overtimeformat + '(次日)';
      }
    },
    //当前指示更新
    cursignref() {
      console.log('当前指示更新')
      this.houseinfodata.servicing_today_hour = JSON.parse(JSON.stringify(this.initdata.servicing_today_hour));
      this.houseinfodata.servicing_tomorrow_hour = JSON.parse(JSON.stringify(this.initdata.servicing_tomorrow_hour));
      let overtime = moment(this.curday + " " + this.orderStartTime + ":00").add(this.curduration, 'minute');
      let starttimeint = parseInt(moment(this.curday + " " + this.orderStartTime + ":00").format("HH"));
      let overtimeint = parseInt(moment(this.curday + " " + this.orderStartTime + ":00").add(this.curduration, 'minute').format("HH"));
      let curtimeint = parseInt(moment().format("HH"));
      if (moment(this.curday).isSame(moment().subtract(1, 'm'), "day")) {
        for (let i = 0; i < curtimeint; i++) {
          this.houseinfodata.servicing_today_hour[i]['status'] = 0
        }
      }
      if (moment(this.curday).isSame(overtime, "day")) {
        //未跨天
        console.log('未跨天', starttimeint, this.curduration, overtimeint, this.houseinfodata)
        for (let i = starttimeint; i < overtimeint; i++) {
          if (starttimeint <= i && i < overtimeint) {
            if (this.houseinfodata.servicing_today_hour[i]['status'] == 1) {
              this.houseinfodata.servicing_today_hour[i]['status'] = 3
            }
          }
        }
      } else {
        //跨天
        console.log('跨天', starttimeint, overtimeint, this.houseinfodata, this.houseinfodata.servicing_tomorrow_hour[0])
        for (let i = starttimeint; i < 24; i++) {
          if (starttimeint <= i && i < 24) {
            if (this.houseinfodata.servicing_today_hour[i]['status'] == 1) {
              this.houseinfodata.servicing_today_hour[i]['status'] = 3
            }

          }
        }
        for (let i = 0; i < overtimeint; i++) {
          if (i < overtimeint) {
            if (this.houseinfodata.servicing_tomorrow_hour[i]['status'] == 1) {
              this.houseinfodata.servicing_tomorrow_hour[i]['status'] = 3
            }
          }
        }
      }

    },
    //当前费用更新
    curexpenseref() {

      // this.expense = math.multiply(this.houseinfodata.price, this.curduration)
      let cexpense = parseFloat(this.cantimarr.price)
      // console.log('当前费用更新', cexpense)
      // if (this.houseinfodata.package_price[this.curdurationindex]['id'] == 0) {
      // let hours = math.divide(this.curduration, 60);
      this.expense = cexpense.toFixed(2)
      // } else {
      //   this.expense = cexpense
      // }
    },
    //格式化日期
    formast(time) {
      return moment(time).format("MM-DD")
    },

    //获取数据
    getdata(callback) {
      houseInfo(
          {
            date: this.curday,
            house_id: this.house_id
          },
          (res) => {
            console.log('houseInfo', res)
            if (res.data.code == 0) {
              this.initdata = JSON.parse(JSON.stringify(res.data.data))
              this.houseinfodata = res.data.data;
              callback();
            }
          }
      );
    },
    //查看
    seetime() {
      this.seetimedata.visible = true
    },

    closeseetime() {
      this.seetimedata.visible = false
    },
    // 获取可预定时间
    gettimePreview() {
      let starttime = moment(this.curday + " " + this.orderStartTime).format("YYYY-MM-DD HH:mm:ss");
      let endtimen = moment(starttime).add(this.curduration, 'minute').format("YYYY-MM-DD HH:mm:ss");
      console.log('获取可预定时间', starttime, endtimen)
      timePreview({
        id: this.house_id,
        start_time: starttime,
        end_time: endtimen,
        package_id: this.houseinfodata.package_price[this.curdurationindex]['id'] + ''
      }, res => {
        console.log('刷新可预定时间', res)
        if (res.data.code == 0) {
          this.cantimarr = res.data.data
          this.curday = moment(res.data.data.start_time).format("YYYY-MM-DD");
          this.orderStartTime = moment(this.cantimarr.start_time).format("HH:mm");
          this.starttime = moment(this.cantimarr.day_start_time).format("HH:mm");
          console.log('this.starttime', this.starttime)
        }

        this.curtimeref()
        // this.curdurationref()
        this.cursignref()

        this.curexpenseref()
      })
    },
    // 去支付
    gopay() {
      let _this = this
      if (app.globalData.loginstatus == 2) {
        _this.subpays()
      } else {
        uni.navigateTo({
          url: "/packageC/login/login"
        })
      }
    },
    // 支付
    subpays() {
      uni.showLoading({
        title: '操作中...'
      });
      let _this = this
      let starttime = this.curday + ' ' + this.orderStartTime + ":00";
      let endtimen = moment(starttime).add(this.curduration, 'minute').format("YYYY-MM-DD HH:mm:ss");
      submitpreview({
        house_id: this.house_id,
        start_time: starttime,
        end_time: endtimen,
        package_id: this.houseinfodata.package_price[this.curdurationindex]['id'] + '',
        book_type: '1'
      }, res => {
        uni.hideLoading();
        if (res.data.code == 0) {
          if (this.houseinfodata.room_status_data.status == 3) {
            uni.showModal({
              title: "该桌台还未进行清洁打扫，是否继续预定",
              success: function (ures) {
                if (ures.confirm) {
                  console.log("跳转-----", _this.houseinfodata.package_price[_this.curdurationindex]['id'])
                  uni.navigateTo({
                    url: "/packageB/dingdanzhifu/dingdanzhifu?title=" + _this.houseinfodata.name + "&house_id=" + _this.house_id + "&start=" + starttime + "&end=" + endtimen + "&day=" + _this.curday + "&curmoney=" + _this.expense + "&package_id=" + _this.houseinfodata.package_price[_this.curdurationindex]['id']
                  })
                }
              }
            })
          } else {
            uni.navigateTo({
              url: "/packageB/dingdanzhifu/dingdanzhifu?title=" + _this.houseinfodata.name + "&house_id=" + _this.house_id + "&start=" + starttime + "&end=" + endtimen + "&day=" + _this.curday + "&curmoney=" + _this.expense + "&package_id=" + _this.houseinfodata.package_price[_this.curdurationindex]['id']
            })
          }
        } else if (res.data.code == 203) {
          console.log("当前时段已被占用")
          uni.showModal({
            title: "当前时段已被占用",
            content: "请重新选择预定时段，点击“查看时段”查看已占用时段",
            confirmText: "查看时段",
            success: function (ures) {
              if (ures.confirm) {
                _this.seetime()
              }
            }
          })
        } else {
          uni.showModal({
            title: res.data.msg,
            showCancel: false,
            success: function (res) {

            }
          })
        }
      })
    },

  }
}
</script>
<style>
.scroll-view {
  height: 100vh;
  /* 设定滚动视图的高度，这里使用视口高度 */
}

.swiper {
  width: 100%;
  height: 410rpx;
  /* 设置轮播图的高度，根据需要调整 */
}

.slide-image {
  width: 100%;
  /* 图片宽度100%填充容器 */
  height: 100%;
  /* 图片高度100%填充容器 */
}

.gg {
  height: 60rpx;
  display: flex;
  /* 使用Flexbox布局 */
  align-items: center;
  /* 垂直居中 */
  font-size: 12px;
  /* 将字体大小设为14px */
  font-family: '宋体', 'SimSun', sans-serif;
  color: rgb(43, 43, 43);
}

.gg_tp {
  margin: 40rpx;
  width: 25rpx;
  height: 25rpx;
}

.ydxz {
  height: 80rpx;
  margin: 20rpx 30rpx 20rpx 30rpx;
  padding: 10rpx 10rpx 10rpx 10rpx;
  display: flex;
  /* 使用Flexbox布局 */
  justify-content: space-between;
  /* 子元素之间平均分布在容器中 */
  background-color: rgb(236, 235, 235);
  align-items: center;
  /* 垂直居中 */
  border-radius: 4px;
  /* 圆角设置为20px */
}

.ydxz_zz {
  background-color: rgb(245, 215, 170);
  color: rgb(167, 106, 56);
  height: 80rpx;
  width: 50%;
  border-radius: 3px;
  /* 圆角设置为20px */
  font-weight: bold;
  /* 设置字体加粗 */
  display: flex;
  /* 使用Flexbox布局 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  font-size: 18px;
  /* 将字体大小设为14px */
}

.ydxz_yq {
  border-radius: 3px;
  /* 圆角设置为20px */
  height: 80rpx;
  width: 50%;
  display: flex;
  /* 使用Flexbox布局 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  font-size: 18px;
  /* 将字体大小设为14px */
}

.xzq_yd {
  height: 100rpx;
  display: flex;
  /* 使用Flexbox布局 */
  align-items: center;
  /* 垂直居中 */
  margin: 20rpx 30rpx 20rpx 30rpx;
  padding: 10rpx 10rpx 10rpx 10rpx;
}

.xzq_yd_k {
  padding: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  margin-right: 10rpx;
  border-radius: 4px;
  /* 圆角设置为20px */
  color: #717171;
  font-weight: bold;
  /* 设置字体加粗 */
  background-color: #f5f5f6;
}

.xzq_active {
  background-color: #6fb49c;
  color: #fdfefe;
}

.sj_text {
  display: flex;
  /* 使用Flexbox布局 */
  justify-content: space-around;
  color: rgb(141, 139, 139);
  font-size: 15px;
  /* 将字体大小设为14px */
  margin-bottom: -35rpx;
}

.sj_title {
  margin-bottom: 15rpx;
}

.sj_box {
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sj_ks {
  color: rgb(123, 199, 142);
  border: 1rpx solid rgb(123, 199, 142);
  display: flex;
  /* 使用Flexbox布局 */
  justify-content: space-between;
  align-items: center;
  /* 垂直居中 */
  border-radius: 100rpx;
  /* 设置边框圆角 */
  padding: 15rpx 40rpx 15rpx 40rpx;
}

.sj_sc {
  padding-top: 15rpx;
  color: #1a1a1a;
}

.sj_js {
  padding-top: 15rpx;
  color: rgb(123, 199, 142);
}

.sj_ksb {
  margin-left: 5rpx;
  width: 35rpx;
  height: 35rpx;
}

.bx_h3 {
  padding: 32rpx 20rpx 30rpx 10rpx;
  display: block;
  display: flex;
  /* 使用Flexbox布局 */
  font-size: 12px;
  /* 将字体大小设为14px */
}

.kexuan {
  background-color: #f0f0f0;
  /* 设置输入框背景色为灰色 */
  margin-right: 10rpx;
  width: 30rpx;
  height: 30rpx;
}

.bukexuan {
  background-color: #d86265;
  /* 设置输入框背景色为灰色 */
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
  margin-left: 20rpx;
}

.if_fk {
  padding: 0rpx 20rpx 15rpx 20rpx;
  font-size: 9px;
  /* 将字体大小设为14px */
  display: flex;
  /* 使用Flexbox布局 */
  justify-content: space-between;
  /* 子元素之间平均分布在容器中 */
}

.if_fk_fk {
  display: flex;
  /* 使用Flexbox布局 */
  justify-content: space-between;
  /* 子元素之间平均分布在容器中 */
}

.k_fk {
  width: 26rpx;
  height: 26rpx;
  margin-left: 2rpx;
  background-color: #f0f0f0;
}

.k_select {
  background-color: #6eb399;
}

.k_selected {
  background-color: #d86364;
}

.cr {
  padding: 0 0 15rpx 20rpx;
  font-size: 12px;
  /* 将字体大小设为14px */
}

.ztxq {
  padding: 0rpx 20rpx 300rpx 20rpx;
  margin: 20rpx 5rpx 0rpx 20rpx;
  font-size: 19px;
  /* 将字体大小设为14px */
  color: rgb(53, 53, 53);
}

.ztxq_h1 {
  font-weight: bold;
  /* 设置字体加粗 */
  margin-bottom: 20rpx;
}

.ztxq_text {
  font-size: 14px;
  /* 将字体大小设为14px */
}

.baoxiang_name {
  position: absolute; /* 相对于swiper-container定位 */
  top: 320rpx; /* 距离轮播图顶部的位置 */
  left: 0;
  width: 100%; /* 占据整个轮播图的宽度 */
  display: flex; /* 使用flex布局来水平排列子元素 */
  justify-content: flex-start; /* 子元素从左边开始排列 */
  align-items: center; /* 子元素垂直居中 */
  z-index: 1; /* 确保元素显示在轮播图上方 */
  margin-left: 20rpx;
}

.bx_lbt_name {
  flex-shrink: 0; /* 防止元素在空间不足时缩小 */
  margin-right: 20rpx; /* 右边距 */
  color: rgb(255, 255, 255);
  font-size: 35rpx;
  font-weight: bold;
  border-radius: 5rpx;
  padding: 10rpx;
  /* 其他样式，比如背景色、内边距等 */
}

.zhuangtai {
  position: absolute; /* 相对于swiper-container定位 */
  top: 320rpx; /* 距离轮播图顶部的位置 */
  left: 0;
  width: 100%; /* 占据整个轮播图的宽度 */
  display: flex; /* 使用flex布局来水平排列子元素 */
  justify-content: flex-start; /* 子元素从左边开始排列 */
  align-items: center; /* 子元素垂直居中 */
  z-index: 1; /* 确保元素显示在轮播图上方 */
  margin-left: 600rpx;
}

.zt_lbt_name {
  flex-shrink: 0; /* 防止元素在空间不足时缩小 */
  margin-right: 20rpx; /* 右边距 */
  color: rgb(255, 255, 255);
  font-size: 28rpx;
  border-radius: 5rpx;
  padding: 10rpx;

  /* 其他样式，比如背景色、内边距等 */
}


.modal-mask {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  z-index: 9999;
}

.modal-container {
  width: 100%;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}

.gr_tc_xyb {
  background-color: rgb(245, 215, 170);
  height: 90rpx;
  margin: 40rpx 30rpx 60rpx 30rpx;
  border-radius: 12rpx; /* 设置边框圆角 */
  display: flex;
  justify-content: center;
  align-items: center;
}

._x {
  width: 40rpx;
  height: 40rpx;
  margin: 40rpx 0rpx 0rpx 670rpx;
}


.scroll-view_H {
  white-space: nowrap;
  width: 100%;
}

.scroll-view-item_H {
  display: inline-block;
  text-align: center;
  font-size: 36rpx;
}
</style>
